<template>
  <div class="count">
    <h2>当前累计结果为:{{  countStore.sum  }}</h2>
    <h2>就读于：{{  countStore.school  }},地址位于：{{ countStore.address }}</h2>
    <select v-model.number="n">
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
    </select>
    <button @click="add">加</button>
    <button @click="sub">减</button>
  </div>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'
import { useCountStore } from '@/store/count';
const countStore=useCountStore()
console.log(countStore.sum)
// 若是定义一个ref包裹的数据对象，使用时，需要调用对象.value进行使用
// 若是一个reactive包裹的ref对象，直接使用该对象的名字即可，reactive会进行的自动解包
// const obj=reactive({
//     a:1,
//     b:2,
//     c:ref(3)
// })
// const x=ref(8)
// console.log("x"+x.value)
// console.log(obj.c)

let n=ref(1)
function add(){
    // pinia进行数据修改的方式一：拿到数据后直接进行使用
    // countStore.sum+=n.value
    // countStore.school="青软实训"
    // countStore.address="青岛"
    // pinia进行数据修改的方式二：适用于批量修改数据的操作
    countStore.$patch({
        sum:countStore.sum+=n.value,
        school:"青软实训总部基地",
        address:"山东省青岛市"
        
    })
}
function sub(){
    countStore.sum-=n.value
}

</script>

<style scoped>
.count{
    background-color: lightblue;
    border-radius: 6px;
    box-shadow: 6px 6px 12px gray;
    padding: 10px;

}
.count *{
    margin: 10px;
}

</style>